<template>
	<div class="login">
		<div>
		<div class="login-ipone">
			<h1>注册</h1>
			<div class="login-input">
			<loginregister></loginregister>
			<input type="password" placeholder="确认密码" class="sureword"/>
			<div class="sureerror"></div>
			
			<div class="code-random">
			<input type="text" placeholder="验证码" class="code"/>
			<span class="random"></span><span class="change">看不清,换一张</span>
			</div>
			<div class="codeerror"></div>
			<div class="import-code">
			<input type="text" placeholder="手机验证码"class="iponecode"/><span>获取验证码</span>
			<div class="importerror"></div>
			</div>
			</div>
			<input type="radio" checked/>我已经阅读并同意《易和用户使用协议》
			<loginregister1></loginregister1>
			
		</div>
</div>
	</div>
</template>

<script>
import loginregister from '@/components/loginregister'
import loginregister1 from '@/components/loginregister1'
	//手机验证
$(function(){
	yanzhengma();
	function yanzhengma(){
	var num = [];
	for(var i=0; i<6; i++){
					var num1 = Math.floor(Math.random()*6);
				     num.push(num1);
			       	$(".random").html(num)
				}	
			}
    //随机数
    var num = [];
    $(".change").click(function(){	
			yanzhengma();
    })
         $(".code").blur(function(){
       if($(".random").html()==$(".code").val()){
    		$(".codeerror").html("");
    		$(".codeerror").addClass("icon1")
    	}else{
    		$(".codeerror").removeClass("icon1");
            $(".codeerror").html('密码格式不对');
    	}	
    });
    //确认密码
    $(".sureword").blur(function(){  	
    	if($(".sureword").val()==$(".word").val()){
					console.log($(".code").val())				
					 $(".sureerror").addClass("icon1")
				}
    })
    //获取手机验证码
    $(".import-code span").click(function(){
    	var reg = /^[0-9]{4}$/;
    	if(reg.test($(".iponecode").val())){
    		$(".importerror").html("");
    		$(".importerror").addClass("icon1")
    	}else{
    		$(".importerror").removeClass("icon1");
            $(".importerror").html('密码格式不对');
    	}	
    })

})
	export default {
		name : "register",
		data() { 
			return{}
		},
		components: {
			loginregister,loginregister1
		}
	}
</script>

<style scoped>
	.login{
		width: 100%;
		background-color: #008CE1;		
}
.login>div{
	width:1180px;
	height: 665px;
	margin: 0 auto;
	border: 1px solid rgba(0,0,0,0);
	background: url(http://www.youhopelife.com/imgs/login_bg.png) 0 100% no-repeat #008CE1;
}
	.login-ipone{
    width: 325px;
    height: 560px;
    background: #fff;
    padding: 30px;
    margin-left: 790px;
    margin-top: 20px;
	}
	.register-ipone>h1{
    font-size: 24px;
    color: #999;
	}
	.login-input input{		
	border: 1px solid #d3d3d3;
    padding: 3px 8px;
    background: #f9f9f9;
    color: #666;
    height: 37px;  
    font-family: "Microsoft Yahei";
	}
	.login-input>input{
		width: 300px;
		margin: 10px 0;
	}
	.code-random{
		padding-top: 10px;
		overflow: hidden;
	}
	.code-random>span{
		display: inline-block;
		width: 80px;
		height: 37px;
		margin: 0 10px;		
	}
	.code-random>input{
		width: 80px;
		margin-bottom: 10px;
		float: left;
	}
	.random{
		float: left;
		text-align: center;
		line-height: 37px;
		font-size: 16px;
		border: 1px solid black;
	}
	.code-random>span+span{
		cursor: pointer;
		line-height: 37px;	
	}
	.import-code{
		position: relative;
	}
	.iponecode{
		width: 300px;
	}
	.import-code>span{
		display: inline-block;
		width: 100px;
		height: 25px;
		background-color: #018CDF;
		color: white;
		text-align: center;
		line-height: 25px;
		position: absolute;
		top:10px;
		right: 10px;
		cursor: pointer;
	}
	.login-ipone>input{
		margin-top: 20px;
	}
	.codeerror{
		width: 100px;
		margin-bottom: 10px;
	}
	.icon1{
		width:15px;
		height: 15px;
		background: url(../assets/img/duihao.png) 100% 100% no-repeat;
		background-size: 100% 100%;
	}
</style>